<template>
  <div class="page-list">
      <ul>
            <li>
              <el-button type="primary" size="small" @click="goleft" :disabled="this.nowpage == 1">{{left}}</el-button>
            </li>
            <li v-for="i in pagenum" :key="i" @click="changepage(i)">{{i}}</li>
            <li>
              <el-button type="primary" size="small" @click="goright" :disabled="this.nowpage == pagenum">{{right}}</el-button>
            </li>
      </ul>
      <div class="page-num">
          <p>第{{nowpage}}页</p>
      </div>
    
  </div>
</template>

<script>
export default {
    name: 'page',
    props: {
        pagesize: {
            type: Number,
            default: 10
        },
        total: {
            type: Number
        }
    },
    data() {
        return {
            pagesize1: this.pagesize,
            total1: this.total,
            pagenum: 0,
            left: "<",
            right: ">",
            nowpage: 1
        }
    },
    mounted() {
        this.pagenum = Math.ceil(this.total1/this.pagesize1)
        // console.log(this.pagenum)

    },
    methods: {
        changepage(index){
            console.log(index)
            this.nowpage = index
            this.$emit("changepagenum",index)
        },
        goright() {
            // console.log("go right")
            this.nowpage +=1
            this.$emit("turnright",this.nowpage)
        },
        goleft() {
            this.nowpage = this.nowpage - 1
            this.$emit("turnleft",this.nowpage)
        }
    }
}
</script>

<style scoped>
.page-list {
    position: absolute;
    bottom: 20px;
    left: 50%;
}
.page-list ul {
    list-style: none;
    float: left;
}
.page-list ul button {
    background-color: rgb(228, 228, 228);
    border: none;
    color:#000;
}
.page-list li {
    display: inline-block;
    background-color: rgb(228, 228, 228);
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    margin-left: 5px;
}
.page-list li:hover {
    background-color: #ccc;
}
.page-num {
    float: right;
    margin-left: 10px;
    height:30px;
    line-height: 30px;
    color: rgb(153, 153, 153);
}
</style>